// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';

/**
 * Conditional messaging for supported / unsupported
 * platforms on the /download/thanks/ page.
 */

/* stylelint-disable declaration-no-important */

// Hide platform specific messaging by default.
.show-windows,
.show-windows-10-plus,
.show-mac,
.show-linux,
.show-else,
.show-auto-download-notification {
    display: none !important;
}

.show-linux {
    .c-linux-button-group {
        margin-bottom: $spacing-md;

        a:first-child {
            margin-bottom: $spacing-md;
        }
    }
}

// Show platform specific messaging when known.
.js {
    &.osx {
        .show-mac,
        .show-auto-download-notification {
            display: block !important;
        }

        // issue 13317
        &.fx-unsupported {
            .show-mac,
            .show-auto-download-notification {
                display: none !important;
            }

            .show-unknown {
                display: block !important;
            }
        }
    }

    &.windows {
        .show-windows,
        .show-auto-download-notification {
            display: block !important;
        }

        &.windows-10-plus {
            .show-windows-10-plus {
                display: block !important;
            }
        }

        // issue 13317
        &.fx-unsupported {
            .show-windows,
            .show-auto-download-notification {
                display: none !important;
            }

            .show-unknown {
                display: block !important;
            }
        }
    }

    &.linux {
        .show-linux {
            display: block !important;
        }
    }

    &.android,
    &.ios {
        .show-else {
            display: block !important;
        }
    }
}

.show-unknown {
    // Show unknown state messaging by default.
    display: block !important;

    // When platform is known, hide all unknown messaging.
    .js.osx &,
    .js.windows &,
    .js.linux &,
    .js.android &,
    .js.ios & {
        display: none !important;
    }
}

/* stylelint-enable */
